<!-- 新增/编辑补卡规则 -->
<template>
  <a-modal
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div>{{ formData.data.id ? '编辑补卡规则' : '新增补卡规则' }}</div>
    </template>
    <a-form
      :model="formData.data"
      :rules="rules"
      ref="refForm"
      auto-label-width
    >
      <a-form-item label="补卡规则名称" field="name" show-colon>
        <a-input v-model="formData.data.name" placeholder="请输入" />
      </a-form-item>
      <section>
        <h3>规则设置</h3>
        <a-space direction="vertical">
          <div>企业可以限制允许员工发起补卡审批的次数</div>
          <div>
            每位员工每个月最多补卡
            <a-input-number
              style="width: 100px"
              :min="0"
              hide-button
              :default-value="0"
              v-model="formData.data.count"
            />
            次
          </div>
        </a-space>
      </section>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible']);
let refForm = ref();
const rules = {
  name: [
    {
      required: true,
      message: '请选择'
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      //
    }
  }
);

const formData: any = reactive({
  data: {
    name: undefined, // 名称
    count: 0 // 补卡次数
  }
});

const getData = () => {
  try {
    //
  } catch (error: unknown) {
    console.log(error);
  }
};

// 保存
const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  } else {
    emit('update:visible', false);
  }
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
:deep(.arco-input-append) {
  background-color: rgba(237, 239, 253, 0.447);
}
</style>
